<template>
    <div class="product">
      <div class="wrap clearfix g-mt60" style="border-top: 1px solid transparent">
        <pro-con :loading="loading">
          <div slot="list" class="pro-list g-mt10">
            <li class="pro-item" v-for="item in list" @click="select(item)">
              <a href="#" class="link-wrap">
                <div class="pic-wrap">
                  <img src="/static/images/dot.jpg" alt="..."/>
                </div>

                <div class="pro-des">
                  <p class="pro-title">必不可少的标题</p>
                  <p class="pro-price">￥<em>8080.00</em></p>
                </div>

                <div class="btn-wrap">
                  <a href="#" class="btn go-buy">立即购买</a>
                  <a href="#" class="btn join-cart">加入购物车</a>
                </div>
              </a>
            </li>
          </div>

          <div slot="loading-more" class="loading-more">
            <Button type="primary" :loading="!loading" @click="loadingMore">
              <span v-if="loading">click me!!</span>
              <span v-else>loading</span>
            </Button>
          </div>
        </pro-con>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import ProCon from 'base/proCon/proCon'
    import ProList from 'base/pro-list/pro-list'
    import Loading from 'base/loading/loading'
    import {mapMutations} from 'vuex'

    export default {
      data () {
        return {
          list: [],
          loading: false
        }
      },
      created() {
        setTimeout(() => {
          this.loading = true
          this.list = [1,1,1,1,11]
        }, 1000)
      },
      methods: {
        loadingMore () {
          this.loading = false
          setTimeout(() => {
           this.list.push(1)
           this.list.push(1)
           this.list.push(1)
           this.loading = true
          }, 2000)
        },
        join(item) {

        },
        select(item) {
          this.$router.push({
            path: '/prodetail'
          })
          this.setProDetail(item)
        },
        ...mapMutations({
          setProDetail: "SET_PRODETAIL"
        })
      },
      components: {
		ProCon,
        ProList,
        Loading
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .product
    position: relative
    .pro-list
      font-size: 0
      li.pro-item
        display: inline-block
        width: 282px
        margin: 0 15px 25px
        border: 1px solid #eee
        box-shadow: 0 0 10px 0px $vice-color
        sc($font-small-x, $back)
        br(3px)
        .pic-wrap
          padding: 10px
          img
            width: 100%
        .pro-des
          padding: 0 10px
          .pro-title
            hh(20px)
            sc($font-medium, #888)
            no-wrap()
          .pro-price
            margin-top:5px;
            em
              margin-right: 4px;
              font-weight: bold
              sc($font-large-x, red)
        .btn-wrap
          padding: 10px
          font-size: 0
          .btn
            padding: 0 10px
            color: $white
            br(4px)
            &.join-cart
              background-color: $back
            &.go-buy
              margin-right: 20px;
              background-color: $vice-color
        &:nth-child(4n + 1)
          margin-left: 0;
        &:nth-child(4n)
          margin-right: 0
    .loading-more
      lbposition(0, 24px)
      wh(100%, 32px)
      text-align: center
    .loading-wrap
      ltposition(0, 0)
      wh(100%, 100%)
      background-color: rgba(0,0,0, .4)
</style>
